<template>
  <div class="ivu-box">
    <Breadcrumb>
      <BreadcrumbItem>用户管理</BreadcrumbItem>
      <BreadcrumbItem>用户列表</BreadcrumbItem>
    </Breadcrumb>

    <Form ref="formInline" :model="request" inline>
      <FormItem>
        <Select v-model="request.status" placeholder="请选择类型" @on-change="changeStatus" style="width: 150px;">
          <Option value="1">管理员列表</Option>
          <Option value="2">角色列表</Option>
        </Select>
      </FormItem>
      <FormItem v-hasPermission="['1']">
        <Button type="primary" v-if="request.status === 1" @click="$router.push('/user/add')">添加管理员</Button>
        <Button type="primary" v-else @click="$router.push('/user/add')">添加角色</Button>
      </FormItem>
    </Form>

    <Table border ref="selection" @on-selection-change="selectChange" :columns="columns" :data="list">
      <template slot-scope="{ row }" slot="type">
        <span v-if="row.type === 1">管理1</span>
        <span v-else-if="row.type === 2">管理2</span>
      </template>
      <template slot-scope="{ row }" slot="option">
        <Button type="primary" size="small" style="margin-right: 5px" @click="edit(row)" v-hasPermission="['3']">编辑
        </Button>
        <Button type="error" size="small" :disabled="row.type === 1" style="margin-right: 5px" @click="del(row)"
                v-hasPermission="['2']">删除
        </Button>
      </template>
    </Table>
    <Button @click="delAll" :disabled="selectID.length===0" style="margin-top: 24px;" v-hasPermission="['2']">批量删除
    </Button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      request: {
        status: '1'// 1管理员 2角色
      },
      columns: [],
      list: [
        // type:1, //1 admin 2 manager 3team 4membe
      ],
      selectID: []
    }
  },
  created () {
    this.changeData()
    // this.userList()
  },
  methods: {
    changeStatus (e) {
      this.request.status = e
      this.changeData()
    },
    changeData () {
      if (this.request.status === 1) {
        this.list = [
          { id: 1, nickname: 'admin', type: 1, last_time: '2020-07-09 15:33:20' },
          { id: 2, nickname: 'manager', type: 2, last_time: '2020-07-09 15:33:20' },
          { id: 3, nickname: 'team', type: 2, last_time: '2020-07-09 15:33:20' }
        ]
        this.columns = [
          { title: 'ID', key: 'id', type: 'selection', width: 60, align: 'center' },
          { title: '用户名', key: 'nickname' },
          { title: '权限组', slot: 'type' },
          { title: '最后登录时间', key: 'last_time' },
          { title: '操作', slot: 'option' }
        ]
      } else {
        this.list = [
          { id: 1, type: 1 },
          { id: 2, type: 2 }
        ]
        this.columns = [
          { title: 'ID', key: 'id', type: 'selection', width: 60, align: 'center' },
          { title: '权限组', slot: 'type' },
          { title: '操作', slot: 'option' }
        ]
      }

      // console.log(this.list)
    },
    selectChange (selection) {
      console.log('选项发生改变', selection)
      this.selectID = []
      selection.forEach(item => {
        this.selectID.push(item.id)
      })

      console.log(this.selectID)
    },

    edit (row) {
      console.log('编辑id:' + row.id)
      this.$Message.success('编辑id:' + row.id)
    },
    del (row) {
      console.log('删除id:' + row.id)
      this.$Message.success('删除id:' + row.id)
      // this.$Modal.confirm({
      // 	title: "确定要删除此用户？",
      // 	onOk: () => {
      // 		this.$Message.success("删除成功");
      // 	},
      // 	onCancel: () => {}
      // });
    },
    delAll () {
      // 批量删除
      this.$Modal.confirm({
        title: '确定要删除这些用户？',
        onOk: () => {
          // this.$Message.success("删除成功");
          this.$Message.success('批量删除id:' + JSON.stringify(this.selectID))
        },
        onCancel: () => {
        }
      })
    },
    //   --------------------- axios ---------------------------
    userList () {
      this.axios.get('user/userList', { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } })
        .then(res => {
          this.list = res.data.list
          console.log(res.data.list)
        })
    }
  }
}
</script>

<style>
</style>
